<!-- <div id="picBox">
	<div class="loading">Loading...
	</div>
	<ul id="show_pic" style="left:0;">
		<li><a href="#"><img src="images/1.jpg"width="527" height="242" alt="" title="" /></a></li>
		<li><a href="#"><img src="images/2.jpg"width="527" height="242" alt="" title="" /></a></li>
		<li><a href="#"><img src="images/3.jpg"width="527" height="242" alt="" title="" /></a></li>
		<li><a href="#"><img src="images/4.jpg"width="527" height="242" alt="" title="" /></a></li>
		<li><a href="#"><img src="images/5.jpg"width="527" height="242" alt="" title="" /></a></li>
	</ul>
</div> -->
<script type="text/javascript" src="{WEBURLPATH}/javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="{WEBURLPATH}/javascript/slides.min.jquery.js"></script>

<style type="text/css">
#example {
	width:547px;
	height:262px;
	position:relative;
}

/*
	Slideshow
*/

#slides {
	position:absolute;
	top:9px;
	left:12px;
	z-index:1;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:527px;
	overflow:hidden;
	position:relative;
	display:none;
	margin:10px;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:527px;
	height:242px;
	display:block;
}

.slides_container a img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:0px;
	left:0px;
	width:24px;
	height:43px;
	display:block;

}

#slides .next {
	left:547px;
}

/*
	Pagination
*/

.pagination {
	position:absolute;
	top:230px;
	left:245px;
	margin:0px auto 0px auto;
	width:100px;
	z-index:9;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url({WEBURLPATH}/images/pagination.gif);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}

#ribbon {
	position:absolute;
	top:2px;
	left:8px;
	z-index:9;
}

#frame {
	position:absolute;
	z-index:0;
	width:551px;
	height:271px;
	top:4px;
	left:11px;
}

</style>
<div id="example">
	<img src="{WEBURLPATH}/images/new-ribbon.gif" width="112" height="112" alt="New Ribbon" id="ribbon">
	<div id="slides">
		<div class="slides_container">
			{loop $webglobal['file_index']['image'] $image}
			<a href="{$image['arcurl']}" title="{echo SpHtml2Text($image['title'])}" target="_blank"><img src="{$image['litpic']}" width="527" height="242" alt="{echo SpHtml2Text($image['title'])}"></a>
			{/loop}
		</div>
		<!-- <a href="#" class="prev"><img src="{WEBURLPATH}/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
		<a href="#" class="next"><img src="{WEBURLPATH}/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> -->
	</div>
	<img src="{WEBURLPATH}/images/example-frame.gif" width="551" height="271" alt="Example Frame" id="frame">
</div>